<template>
  <span @click="$emit('click', $event)" class="icon-button" :title="title">
    <i :class="iconClass"></i><slot></slot>
  </span>
</template>

<script>
var nameMap = {
  "add": "add-line",
  "authors": "quill-pen-fill",
  "back": "arrow-go-back-line",
  "book": "book-line",
  "bookmark": "bookmark-3-fill",
  "brush": "brush-fill",
  "collaboration": "service-line",
  "comments": "chat-1-line",
  "clock": "time-line",
  "delete": "delete-bin-5-fill",
  "delete-2": "delete-bin-2-line",
  "edit": "edit-line",
  "elink": "external-link-fill",
  "emotion": "emotion-line",
  "era": "ancient-pavilion-line",
  "eye": "eye-fill",
  "eye-close": "eye-close-line",
  "field": "function-line",
  "file": "file-line",
  "flag": "flag-2-line",
  "friends": "user-heart-line",
  "folder": "folder-fill",
  "genre": "stack-line",
  "github": "github-fill",
  "group": "group-line",
  "home": "home-line",
  "hot": "fire-line",
  "hot-fill": "fire-fill",
  "info": "question-line",
  "language": "code-line",
  "list": "list-unordered",
  "medal": "medal-line",
  "moon": "moon-line",
  "newspaper": "newspaper-line",
  "note": "mark-pen-line",
  "percent": "percent-line",
  "pinyin": "pinyin-input",
  "place": "earth-line",
  "plan": "calendar-todo-line",
  "poetry-society": "home-8-line",
  "quote": "double-quotes-l",
  "reader": "book-mark-line",
  "rhyme": "volume-down-line",
  "search": "search-line",
  "share": "share-line",
  "sort": "arrow-up-down-line",
  "sort-down": "sort-desc",
  "sort-up": "sort-asc",
  "sound": "volume-up-line",
  "star": "star-line",
  "star-fill": "star-fill",
  "start": "play-circle-line",
  "style": "palette-line",
  "sun": "sun-line",
  "translate": "translate",
  "tune": "disc-line",
  "upload": "upload-2-fill",
  "user": "user-3-fill",
  "x": "close-line"
};

var titleMap = {
  "add": "添加",
  "authors": "作者",
  "back": "返回",
  "bookmark": "好书",
  "brush": "书写",
  "comments": "评论",
  "delete": "删除",
  "edit": "编辑",
  "elink": "外站链接",
  "emotion": "情感",
  "home": "首页",
  "hot": "热门",
  "hot-fill": "热度",
  "list": "目录",
  "note": "笔记",
  "pinyin": "注音",
  "quote": "引用",
  "search": "搜索",
  "sort": "排序",
  "sort-down": "降序",
  "sort-up": "升序",
  "star": "标星",
  "star-fill": "星星",
  "sound": "读音",
  "translate": "翻译",
  "upload": "上传",
  "user": "用户"
};
export default {
  props: ["i","n"],
  emits: ["click"],
  computed: {
    iconClass() {
      if (this.i in nameMap) {
        return "ri-" + nameMap[this.i];
      } else {
        return "ri-question-line";
      }
    },
    title() {
      if (this.i in titleMap) {
        return titleMap[this.i];
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="stylus">

.icon-button
  display inline-block
  cursor pointer
  vertical-align middle

  i
    margin-right 0.2vw

  &:hover
    color #409EFF
</style>

